import { history } from 'umi';
import React from 'react';
import { Flex, NavBar, Cell, Image } from 'react-vant';
import { Finance, Transaction } from '@icon-park/react';
import { SafeArea } from 'antd-mobile';
import './bill.less';

const goBack = () => {
  history.back();
}

export default function BillPage() {
  return (
    <div className='bill'>
      <NavBar title='资金明细' leftText='返回' onClickLeft={goBack} />
      <div className='bill-list'>
        <Flex align='center' justify='between' className='bill-title'>
          <Flex.Item className='month'>2024年6月</Flex.Item>
          <Flex.Item className='total'>支出¥5332.33 收入¥1235.00</Flex.Item>
        </Flex>
        <Cell center className='bill-item'>
          <Flex align='center' justify='between'>
            <Flex.Item>
              <Flex align='center' gutter={10}>
                <Flex.Item><Finance className='bill-item-icon' theme='two-tone' size='48' fill={['#ffc300' ,'#ffeb3b']}/></Flex.Item>
                <Flex.Item>
                  <div className='bill-item-title'>余额提现-微信零钱</div>
                  <div className='bill-item-time'>06-14 21:48</div>
                </Flex.Item>
              </Flex>
            </Flex.Item>
            <Flex.Item>
              <div className='bill-item-sum'>
                <div className='change'><span>1200</span>.00</div>
              </div>
            </Flex.Item>
          </Flex>
        </Cell>
        <Cell center className='bill-item'>
          <Flex align='center' justify='between'>
            <Flex.Item>
              <Flex align='center' gutter={10}>
                <Flex.Item><Image lazyload round width='48' height='48' fit='cover' src='//res.dayupp.com/partner/9fa863d7ab9db21d6763ad29fa4695c1.jpg'/></Flex.Item>
                <Flex.Item>
                  <div className='bill-item-title'>小熊-密室逃脱</div>
                  <div className='bill-item-time'>06-14 21:48</div>
                </Flex.Item>
              </Flex>
            </Flex.Item>
            <Flex.Item>
              <div className='bill-item-sum'>
                <div className='change'>-<span>990</span>.00</div>
              </div>
            </Flex.Item>
          </Flex>
        </Cell>
        <Cell center className='bill-item'>
          <Flex align='center' justify='between'>
            <Flex.Item>
              <Flex align='center' gutter={10}>
                <Flex.Item><Image lazyload round width='48' height='48' fit='cover' src='//res.dayupp.com/partner/ee4832a5250e0043fdf026604dcd2ee5.jpg'/></Flex.Item>
                <Flex.Item>
                  <div className='bill-item-title'>接单分佣</div>
                  <div className='bill-item-time'>06-14 21:48</div>
                </Flex.Item>
              </Flex>
            </Flex.Item>
            <Flex.Item>
              <div className='bill-item-sum'>
                <div className='change add'>+<span>990</span>.00</div>
              </div>
            </Flex.Item>
          </Flex>
        </Cell>
        <Cell center className='bill-item'>
          <Flex align='center' justify='between'>
            <Flex.Item>
              <Flex align='center' gutter={10}>
                <Flex.Item><Transaction className='bill-item-icon' theme='two-tone' size='48' fill={['#ffc300' ,'#ffeb3b']}/></Flex.Item>
                <Flex.Item>
                  <div className='bill-item-title'>自助下单-微醺小酌</div>
                  <div className='bill-item-time'>06-14 21:48</div>
                </Flex.Item>
              </Flex>
            </Flex.Item>
            <Flex.Item>
              <div className='bill-item-sum'>
                <div className='change'>-<span>19</span>.90</div>
              </div>
            </Flex.Item>
          </Flex>
        </Cell>
        <Cell center className='bill-item'>
          <Flex align='center' justify='between'>
            <Flex.Item>
              <Flex align='center' gutter={10}>
                <Flex.Item><Image lazyload round width='48' height='48' fit='cover' src='//res.dayupp.com/partner/ee4832a5250e0043fdf026604dcd2ee5.jpg'/></Flex.Item>
                <Flex.Item>
                  <div className='bill-item-title'>营销分佣</div>
                  <div className='bill-item-time'>06-14 21:48</div>
                </Flex.Item>
              </Flex>
            </Flex.Item>
            <Flex.Item>
              <div className='bill-item-sum'>
                <div className='change add'>+<span>200</span>.00</div>
              </div>
            </Flex.Item>
          </Flex>
        </Cell>
        <Flex align='center' justify='between' className='bill-title'>
          <Flex.Item className='month'>2024年5月</Flex.Item>
          <Flex.Item className='total'>支出¥5332.33 收入¥1235.00</Flex.Item>
        </Flex>
        <Cell center className='bill-item'>
          <Flex align='center' justify='between'>
            <Flex.Item>
              <Flex align='center' gutter={10}>
                <Flex.Item><Finance className='bill-item-icon' theme='two-tone' size='48' fill={['#ffc300' ,'#ffeb3b']}/></Flex.Item>
                <Flex.Item>
                  <div className='bill-item-title'>余额提现-微信零钱</div>
                  <div className='bill-item-time'>06-14 21:48</div>
                </Flex.Item>
              </Flex>
            </Flex.Item>
            <Flex.Item>
              <div className='bill-item-sum'>
                <div className='change'><span>1200</span>.00</div>
              </div>
            </Flex.Item>
          </Flex>
        </Cell>
        <Cell center className='bill-item'>
          <Flex align='center' justify='between'>
            <Flex.Item>
              <Flex align='center' gutter={10}>
                <Flex.Item><Image lazyload round width='48' height='48' fit='cover' src='//res.dayupp.com/partner/9fa863d7ab9db21d6763ad29fa4695c1.jpg'/></Flex.Item>
                <Flex.Item>
                  <div className='bill-item-title'>小熊-密室逃脱</div>
                  <div className='bill-item-time'>06-14 21:48</div>
                </Flex.Item>
              </Flex>
            </Flex.Item>
            <Flex.Item>
              <div className='bill-item-sum'>
                <div className='change'>-<span>990</span>.00</div>
              </div>
            </Flex.Item>
          </Flex>
        </Cell>
        <Cell center className='bill-item'>
          <Flex align='center' justify='between'>
            <Flex.Item>
              <Flex align='center' gutter={10}>
                <Flex.Item><Image lazyload round width='48' height='48' fit='cover' src='//res.dayupp.com/partner/ee4832a5250e0043fdf026604dcd2ee5.jpg'/></Flex.Item>
                <Flex.Item>
                  <div className='bill-item-title'>接单分佣</div>
                  <div className='bill-item-time'>06-14 21:48</div>
                </Flex.Item>
              </Flex>
            </Flex.Item>
            <Flex.Item>
              <div className='bill-item-sum'>
                <div className='change add'>+<span>990</span>.00</div>
              </div>
            </Flex.Item>
          </Flex>
        </Cell>
      </div>
      <SafeArea position='bottom' />
    </div>
  );
}
